<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="ttsForm">
    <textarea name="input" id="ttsTextarea" cols="30" rows="10" placeholder="请输入文字" required></textarea>
    <br>
    <button type="submit" id="submitBtn">生成音频</button>
    <hr>
    <div id="ttsResponse"></div>
</form>

<script src="./jquery.min.js"></script>
<script>
    $("#ttsForm").submit(function(event) {
        event.preventDefault();
        if ($("#ttsTextarea").val().length < 5) {
            alert("文本太短了")
        } else {
            $("#submitBtn").prop('disabled', true);
            $("#ttsResponse").html('<div class="loading">音频生成中，请稍候...</div>');
            $.post("/ai/tts" ,$("#ttsForm").serialize() ,function(resp) {
                $("#ttsResponse").html(`
                    <audio controls>
                        <source src="${resp}" type="audio/mpeg">
                    </audio>
                `)
            }).always(function() {
                $("#submitBtn").prop('disabled', false);
            });
        }
    });
</script>

</body>
</html>